<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="''"
    wrap-class-name="full-modal design-iframe"
    :canFullscreen="false"
    :destroyOnClose="true"
    :closable="false"
    :footer="false"
  >
    <div class="flex" style="height: 100vh">
      <div
        :class="{
          'w-233px': isShowleft,
          'w-0': !isShowleft,
        }"
        class="pl-2"
      >
        <Tabs v-model:activeKey="activeKey" type="card">
          <TabPane tab="表单" key="1">
            <IframeFormData :formCode="formCode" @sel-field="handleSelField" />
          </TabPane>
          <TabPane tab="脚本库" key="2">
            <ScriptTemplate @sel-field="handleSelField" />
          </TabPane>
          <TabPane tab="数据源" key="3">
            <DataSource @sel-field="handleSelField" />
          </TabPane>
        </Tabs>
      </div>
      <div class="w-full relative">
        <div class="absolute z-10" style="top: 50%">
          <MenuFoldOutlined v-if="isShowleft" style="color: #d1d1d1" @click="isShowleft = false" />
          <MenuUnfoldOutlined
            v-else
            style="color: #d1d1d1"
            class="cursor-pointer"
            @click.stop="isShowleft = true"
          />
        </div>
        <div class="absolute z-10 right-4 top-2 text-red-400">
          <close-circle-outlined class="cursor-pointer" @click="closeModal" />
        </div>
        <AceEditView
          @close="closeModal"
          @success="successModal"
          v-if="!isCloud"
          :scriptStr="scriptStr"
          ref="DesignIframeEditor"
        />
        <iframe
          v-else
          ref="frameRef"
          id="myIframe"
          name="myIframe"
          :src="url"
          frameborder="0"
          style="height: 100%; width: 100%"
        ></iframe>
      </div>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, onMounted, unref, computed } from 'vue';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { MenuUnfoldOutlined, MenuFoldOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import IframeFormData from './modules/iframeFormData/IframeFormData.vue';
  import DataSource from './modules/dataSource/DataSource.vue';
  import ScriptTemplate from './modules/scriptTemplate/ScriptTemplate.vue';
  import { useUserStore } from '/@/store/modules/user';
  import AceEditView from './modules/aceEditView/AceEditView.vue';
  import { getIdeLoginCheckUrl } from '/@/api/system/system';
  const userStore = useUserStore();
  const serverInfo = userStore.getServerInfo;

  const isCloud = computed(() => serverInfo.isCloud);
  const { t } = useI18n();
  const loading = ref(false);
  const url = ref('');
  const isShowleft = ref(true);
  const activeKey = ref('1');
  const formCode = ref('');
  const scriptStr = ref('');
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false, width: '100%' });
    isShowleft.value = true;
    formCode.value = data?.formCode;
    scriptStr.value = data?.scriptStr;
    console.log('scriptStr.value', {
      scriptStr: scriptStr.value,
      formCode: formCode.value,
      data,
    });
  });

  const emits = defineEmits(['success']);

  const frameRef = ref<HTMLFrameElement | null>(null);

  let iframeWin;
  onMounted(async () => {
    await getIdeLoginCheckUrl({}).then((data) => {
      url.value = data.cloudUrl;
    });
  });

  const doPostMessage = (data) => {
    console.log('doPostMessage', data);
    iframeWin = unref(frameRef)?.contentWindow;
    // 传递给iframe中的windows
    iframeWin.postMessage(data, '*');
  };

  defineExpose({
    doPostMessage,
  });

  const handleSelField = (str) => {
    console.log('str', str);
    const newStr = '' + str;
    const data = {
      type: 'insertScript',
      data: newStr,
    };
    if (!isCloud.value) {
      insertScript(newStr);
    } else {
      doPostMessage(data);
    }
    // window.handleSelField &&
    //   typeof window.handleSelField === 'function' &&
    //   window.handleSelField(str);
  };

  const successModal = (value) => {
    emits('success', value);
    closeModal();
  };

  const DesignIframeEditor = ref<Nullable<HTMLElement>>(null);
  const insertScript = (script) => {
    console.log('unref(DesignIframeEditor)', unref(DesignIframeEditor));
    if (unref(DesignIframeEditor)) {
      unref(DesignIframeEditor)?.insertScript(script);
    }
  };
</script>

<style lang="less">
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
      padding-bottom: 0;
      margin: 0;
    }
    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
    }
    .ant-modal-body {
      flex: 1;
      background-color: #333333 !important;
    }
    .ant-tabs {
      font-size: 14px;
      color: #d1d1d1;

      .ant-tabs-tab {
        font-size: 14px;
      }
    }

    .ant-divider {
      text-align: left;
      color: #ffffff;
      font-size: 14px;
    }

    .ant-divider-inner-text {
      padding: 0px;
    }

    .ant-divider-horizontal.ant-divider-with-text::before,
    .ant-divider-horizontal.ant-divider-with-text::after {
      width: 0;
    }

    .field-list {
      line-height: 2;
    }

    .ant-tabs-nav {
      margin-top: 10px;
    }

    .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab,
    .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab {
      background-color: #3c3c3c;
      border: none;
    }
    .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active,
    .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active {
      background-color: #fff;
    }

    /* 选项卡底部的边线 */
    .ant-tabs-top > .ant-tabs-nav::before,
    .ant-tabs-bottom > .ant-tabs-nav::before,
    .ant-tabs-top > div > .ant-tabs-nav::before,
    .ant-tabs-bottom > div > .ant-tabs-nav::before {
      border-bottom: 1px solid #4c4646;
      display: none;
    }

    .ant-select:not(.ant-select-customize-input) .ant-select-selector {
      font-size: 14px;
      background: #3c3c3c;
      color: #d1d1d1;
      border: none;
    }
    .ant-select-arrow {
      color: #6e6e6e;
    }
    .ant-pagination-simple .ant-pagination-simple-pager input {
      background: #3c3c3c;
      border: none;
      color: #d1d1d1;
    }
  }
  .design-iframe .ant-modal-header {
    padding: 0;
  }
  .ant-modal .ant-modal-body > .scrollbar {
    padding: 0;
  }
</style>
